<html>
    <head>
        <link rel="stylesheet" href="css/leaflet.css" />
        <script src="js/leaflet.js"></script>
        <script src="js/leaflet.ChineseTmsProviders.js"></script>
        <script src="js/shpReader.js"></script>
        <script src="js/jquery.min.js"></script>
    </head>
    <body>
        <div style="width: 100vw; height: 100vh" id="map"></div>
        <input type="file" id="importFile" style="position: absolute;z-index: 1000;top: 20px;" />
        <script type="text/javascript">
            // Make basemap
            var normalm = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {
            maxZoom: 18,
            minZoom: 5
            });
            var imgm = L.tileLayer.chinaProvider('GaoDe.Satellite.Map', {
                maxZoom: 18,
                minZoom: 5
            });
            var imga = L.tileLayer.chinaProvider('GaoDe.Satellite.Annotion', {
                maxZoom: 18,
                minZoom: 5
            });

            var normal = L.layerGroup([normalm]),
                image = L.layerGroup([imgm, imga]);

            var baseLayers = {
                "地图": normal,
                "影像": image,
            }
            var map=L.map("map",{
                center: [42.09618442380296, -71.5045166015625],
                zoom: 8,
                layers: [normal],
                zoomControl: false
            });
            L.control.layers(baseLayers, null).addTo(map);
            $('#importFile').unbind("change").change(function(e) {
               
                TransmitFile.fileImport(this.files, function(geojson){
                    var layer=L.geoJSON(geojson).bindPopup("我是加载的数据");
                    layer.addTo(map);
                    map.fitBounds(layer.getBounds());
                    
                });
                
            });
            
        </script>
    </body>
</html>